<template>
    <div class="basicmodule-class-photoalbum">
        <div class="demo-upload-list" v-for="(item,index) in uploadList" :key="index">
            <img :src="item.url">
            <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
            </div>
        </div>

        <Modal v-model="visible">
            <img :src="imgName" v-if="visible" style="width: 100%">
        </Modal>
        <Spin size="large" fix v-if="spinShow" style="z-index:99999"></Spin>
    </div>
</template>

<script>
export default {
    props:['infoIdPl'],
    data () {
        return {
            spinShow:false,
            imgName: '',
            visible: false,
            uploadList:[],//图片集数据
            editUrl:'api/eclass/v1/album/album_pictures?album_type_id=',//请求单条数据路径
            delUrl:'api/eclass/v1/album/picturedelete/',//提交路径
            infoOld:[],//请求的数据
        }
    },
    methods: {
        /************************************************************
         * 
         * 单条数据请求
         * 
         ************************************************************/
        infodata(){
            this.spinShow=true
            this.$http.get(this.editUrl+this.infoIdPl).then(val=>{
                this.uploadList = JSON.parse(JSON.stringify(val.data))
                this.spinShow=false

            }).catch(err => {
                if (err.code && err.code == 422) {
                    this.$Message.error(err.message);
                }
                this.spinShow=false
            })
        },
        
        /************************************************************
         * 
         * 执行删除操作
         * 
         ************************************************************/
        handleRemove (index) {
            this.spinShow=true
            this.$http.delete(this.delUrl+'['+index.eclass_album_id+']').then(val=>{
                const fileList = this.uploadList;
                this.uploadList.splice(fileList.indexOf(index), 1);
                this.$emit('backList')
                this.$Message.success(val.message);
                this.spinShow=false
            }).catch(err => {
                if (err.code && err.code == 422) {
                    this.$Message.error(err.message);
                }
                this.spinShow=false
            })
        },
        // ==================================================
        // 查看操作
        // ==================================================
        handleView (index) {
            this.imgName = index.url;
            this.visible = true;
        },
    },
    mounted(){
        this.infodata();
    },

}
</script>

<style lang="less">
.basicmodule-class-photoalbum{
    position: relative;
    .demo-upload-list{
        display: inline-block;
        width: 200px;
        height: 200px;
        text-align: center;
        line-height: 200px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 40px;
        cursor: pointer;
        margin: 0 30px;
    }
}
</style>
